<template>
  <div class="draw-wrap">

    <div class="draw-title">
      <span>期数</span><span>中奖积分</span><span>中奖人</span>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="draw-van"
    >
      <div class="draw-box">
        <div class="draw-list" v-for="(item,index) in periodList" :key="index" :class="{'light-box':item.winStatus == 1}">
          <span>第{{item.periodNum}}期</span><span>{{item.getScore }}</span><span>{{item.userName}}</span>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import {getUrlKey} from "../../../config/util"


  export default {
    data() {
      return {
        id: "",
        periodList: [],
        currentPage: 1,
        PageSize: 50,
        loading: false,
        finished: false
      }
    },
    mounted() {
      this.id = getUrlKey("id");
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryLuckyList();
            this.timer = null;
          }, 500)
        }
      },
      queryLuckyList() {//查询幸运球开奖记录列表
        this.axios.get(baseUrl + "/prize/get_lucky_ball_record_list?sgin=" + this.id + "&type=3" + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.periodList = this.periodList.concat(resultObj.data);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {
              this.loading = false;
              if (this.periodList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
    },
    filters: {
      changeStatus(type) {
        if (type == 0) {
          return "等待开奖";
        } else if (type == 1) {
          return "中奖";
        } else {
          return "未中奖";
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .draw-wrap
    wh(100%, 100%)
    background: rgba(255, 255, 255, 1)
    .draw-title
      display: flex
      align-items: center
      position: fixed
      top: 0
      z-index: 99
      wh(100%, 1.067rem)
      background: rgba(245, 235, 255, 1)
      span
        flex: 1
        text-align: center
        size-color(0.453rem, rgba(146, 138, 153, 1))
        font-weight: 500
    .draw-van
      position: absolute
      top: 1.333rem
      wh(100%, auto)
      .draw-box
        wh(100%, auto)
        .draw-list
          display: flex
          align-items: center
          wh(100%, 0.96rem)
          span
            flex: 1
            text-align: center
            size-color(0.427rem, rgba(97, 92, 102, 1))
            font-weight: 500
        .light-box
          span
            color: rgba(252, 58, 145, 1)
</style>
